<template>
  <div class="customer-dialog">
    <div class="block text" @click="toggle">
      <i class="iconfont icon-gengxinkehu"></i>
    </div>
    <el-dialog
      :title="$t('customer.updateCustomer')"
      :visible.sync="isShow"
      width="60%">
      <el-form ref="form" label-width="80px" style="padding: 0 20px;" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item, index) in questionnaireDetailCur.custDetial">
            <el-form-item :label="item.name">
              <el-input v-model="item.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--<el-button class="primary_btn" @click="isShow = false">{{$t('public.cancel')}}</el-button>-->
        <el-button class="primary_btn" type="primary" @click="save">{{$t('public.save')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import bus from 'src/store/eventBus'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'ShowCustomerInfo',
    data () {
      return {
        isShow: false,
        questionnaireDetailCur: null
      }
    },
    props: {
      cid: String
    },
    methods: {
      toggle () {
        this.isShow = !this.isShow
      },
      close () {
        this.isShow = false
      },
      save () {
        let custDetial = this.questionnaireDetailCur.custDetial
        let data = {}
        data._id = this.questionnaireDetailCur._id
        custDetial.forEach(item => {
          data[item._id] = item.value
        })
        this.$store.dispatch('updateQuesCustomer', data).then(res => {
          if (res.success) {
            bus.$emit('refreshQuestionnaireLeftCardList')   //   刷新左侧卡片列表
            this.$router.push({ path: '/index/questionnaire' })
            this.close()
            this.$message.success(this.$t('monitor.saveSuccess'))
          }
        })
      }
//      clickFun (event) {
//        if (!this.$el.contains(event.target)) {
//          this.isShow = false
//        }
//      }
    },
    computed: {
      questionnaireDetail () {
        return deepClone(this.$store.state.questionnaire.current)
      }
    },
    watch: { // 当切换卡片时隐藏当前组件
      cid () {
        this.isShow = false
      },
      questionnaireDetail () {
        this.questionnaireDetailCur = this.questionnaireDetail
      }
    },
    mounted () {
      this.questionnaireDetailCur = deepClone(this.$store.state.questionnaire.current)
//      document.addEventListener('click', this.clickFun)
    }
//    beforeDestroy () {
//      document.removeEventListener('click', this.clickFun)
//    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .block
    width 36px
    height 36px
    border 1px solid $c-main
    border-radius 50%
    line-height 36px
    cursor pointer
  .iconfont
    font-size 16px
    color $c-main
  .text
    text-align center
</style>
